<template>
    <div>
        <h1>监控页</h1>
        <button ref="butt" id="btn" @click="increment">{{ count }}</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            count: 1,
        }
    },
    methods: {
        // increment() {
        //     /**
        //      * 数据的变化引起真实DOM的更新是需要时间的，异步的，
        //      * 我们立刻获取真实的DOM数据是不OK的。获取到的将是上次的真实DOM数据。
        //      */
        //     this.count++
        //     //尝试获取最新的真实DOM是的数据
        //     // console.log(document.getElementById('btn').innerHTML);
        //     console.log(this.$refs.butt.innerHTML);
        // },
        increment() {
            /**
             * 如果要获取数据变化之后，最新的真实DOM相关的内容，使用
             * this.$nextTick(）将代码放在它的回调函数中。
             * $nextTick与setTimeout类似, 也是用来延迟执行代码的。
             * 它的触发时机没有时间的控制，而是Vue内部当这次数据更新且真是DOM也更新之后来触发
             *      相比较使用 setTimeout 而言，$nextTick更合适，是有Vue内部控制的微任务队列去操控的。
             */
            this.count++
            // setTimeout(() => {
            //     console.log(this.$refs.butt.innerHTML)
            // })
            this.$nextTick(() => {
                console.log(this.$refs.butt.innerHTML)
            })
        }
    }
}
</script>